
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Image Generator</title>
    <style>
        body{
            background-image: url("images/网页背景图.jpg");
            /*background-size: 100%;*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            color: rgba(255, 255, 255, 0.8);


        }

        #btn {
            width: 90px;
            height: 40px;
            background-color: rgba(253, 253, 252, 0.3);
            border: none; /* 去除边框 */
            margin-left: 15px;
            transition: transform 0.3s ease;
            color: rgba(255, 255, 255, 0.8);
            font-weight: bolder;
            margin-top: 60px;
            font-size: 18px;
            border-radius: 12px; /* 圆角 */
        }

        #btn:hover{
            transform: scale(1.10);
        }


        #ipt{
            width: 400px; /* 调整宽度 */
            height: 20px; /* 调整高度 */
            border-radius: 30px; /* 圆角 */
            border: 0; /* 边框 */
            padding: 10px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            background-color: rgba(253, 253, 252, 0.16);
            /*transition: transform 0.3s ease;*/
            transition: transform 0.3s ease;
            margin-top: 60px;
            font-weight: bold;
        }

        #ipt:hover{
            transform: scale(1.05);
        }

        #ipt::placeholder {
            color: rgba(255, 255, 255, 0.8);
        }


        #imgd{
            width: 600px; /* 调整宽度 */
            height: 400px; /* 调整高度 */
            border-radius: 10px; /* 圆角 */
            border: 0; /* 边框 */
            padding: 10px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            background-color: rgba(253, 253, 252, 0);
            /*margin-top: 50px;*/
            /*overflow: auto;*/
        }
        .first{
            width: 100%;
            height: 40px; /* 100% 视口高度 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .second{
            position: fixed;
            width: 600px;
            height: 80vh; /* 100% 视口高度 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* 将子元素垂直排列 */
            background-color: rgba(253, 253, 252, 0.16);
            border: 0;
            margin-top: 120px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*left: 15.5%;*/
        }

        #imgd img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .logo h2:hover{
            transform: scale(1.01);
        }

        .header a{
            text-decoration: none;
            color: rgba(255, 255, 255, 0.8);
        }

        .logo h2{
            margin-left: 20px;
            margin-top: 15px;
            display: flex;
            justify-content: left;
            transition: transform 0.3s ease;
        }


        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: none;
        }

        #modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10000;
            display: none;
        }

        #modal-image {
            max-width: 100%;
            max-height: 100%;
        }

        /* 分隔线样式 */
        .dashed-divider {
            border-top: 1px dashed #ccc;
            margin: 10px 0; /* 调整上下边距 */
            width: 100%;
        }

        .btn1{
            position: fixed;
            right: 10px;
            width: 90px;
            height: 40px;
            background-color: rgba(253, 253, 252, 0.3);
            border: none; /* 去除边框 */
            transition: transform 0.3s ease;
            color: rgba(255, 255, 255, 0.8);
            font-weight: bolder;
            font-size: 18px;
            border-radius: 12px; /* 圆角 */
        }

        .btn1:hover{
            transform: scale(1.10);
        }



    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<div class="header">
    <div class="logo">
        <h2><img src="images/logo2.png" style="height: 30px;width: 26px">
            <a href="index.jsp">九州AI</a>
            <button class="btn1" onclick="window.location.href='index.jsp'">
                退出
            </button>
        </h2>
    </div>
</div>



<div class="first">
    <input type="text" placeholder="请输入描述内容(仅限英文)" id="ipt"/>
    <button id="btn" >
      开始创作
    </button>

</div>
<div class="second">
    <!-- 单选框组 -->
    <div class="flex-container">
        <input type="radio" name="city" class="radio" id="jacket" value="jacket">
        <label for="jacket">夹克衫</label>

        <input type="radio" name="city" class="radio" id="coat" value="coat">
        <label for="coat">外套</label>

        <input type="radio" name="city" class="radio" id="down jacket" value="down jacket">
        <label for="down jacket">羽绒服</label>

        <input type="radio" name="city" class="radio" id="suit jacket" value="suit jacket">
        <label for="suit jacket">西服</label>
    </div>
    <div class="dashed-divider"></div>
    <!-- 单选框组 -->
    <div class="flex-container">
        <input type="radio" name="city1" class="radio" id="sport pant" value="sport pant">
        <label for="sport pant">运动裤</label>

        <input type="radio" name="city1" class="radio" id="suit pant" value="suit pant">
        <label for="suit pant">西裤</label>

        <input type="radio" name="city1" class="radio" id="jeans" value="jeans">
        <label for="jeans">牛仔裤</label>

        <input type="radio" name="city1" class="radio" id="down pants" value="down pants">
        <label for="down pants">羽绒裤</label>
    </div>
    <div class="dashed-divider"></div>
    <div id="imgd">
        <img src="images/test.png" class="ig">
    </div>
</div>
<div id="overlay"></div>

<div id="modal">
    <img id="modal-image" src="" alt="">
</div>




    <script>
        function generateImage() {

            var inputText = document.getElementById("inputText").value;

            // 后端接口URL
            var url = "/generateImage";

            // 发送POST请求到后端接口，传递语句
            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(inputText)
            })
                .then(response => response.blob())
                .then(blob => {
                    // 将返回的图片数据显示在页面上
                    var generatedImage = document.getElementById("generatedImage");
                    generatedImage.src = URL.createObjectURL(blob);
                    // historyImages.push(generatedImage.src);


                })
                .catch(error => console.log(error));

        }

        $("#btn").click(async function (){


            const form = new FormData()
            form.append('prompt',$("#ipt").val())
            console.log($("#ipt").val())

            fetch('https://clipdrop-api.co/text-to-image/v1', {
                method: 'POST',
                headers: {
                    'x-api-key': '7461eb3fed0979017c821d6210b8c316e8b4c0872ffe85db594d74c25fe64bc70cc0b45d129f8c3013abe1f7368cf62f',
                },
                body: form,
            })
                .then(response => response.arrayBuffer())
                .then(buffer => {
                    // buffer here is a binary representation of the returned image

                    console.log(buffer)
                    const img = document.createElement('img');
                    const base64Image = _arrayBufferToBase64(buffer);
                    console.log(base64Image)


                    img.src = `data:image/jpeg;base64,`+base64Image;

                    const resultImgDiv = document.getElementById("imgd");


                    // 将 img 元素添加到 resultImgDiv 中
                    $("#imgd").empty();
                    resultImgDiv.appendChild(img);


                })
                .catch(error => {
                    console.error('Fetch error:', error);
                });
        })


        function _arrayBufferToBase64( buffer ) {
            var binary = '';
            var bytes = new Uint8Array( buffer );
            var len = bytes.byteLength;
            for (var i = 0; i < len; i++) {
                binary += String.fromCharCode( bytes[ i ] );
            }
            return window.btoa( binary );
        }

        // 获取所有要点击放大的图片元素
        var images = document.getElementsByClassName("ig");

        // 遍历图片元素，为每个元素添加点击事件监听器
        for (var i = 0; i < images.length; i++) {
            images[i].addEventListener("click", function() {
                // 显示遮罩层和放大图片的元素
                document.getElementById("overlay").style.display = "block";
                document.getElementById("modal").style.display = "block";

                // 设置放大图片的src为点击的图片的src
                var clickedImageSrc = this.src;
                document.getElementById("modal-image").src = clickedImageSrc;
            });
        }


        // 点击遮罩层时隐藏遮罩层和放大图片的元素
        document.getElementById("overlay").addEventListener("click", function() {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("modal").style.display = "none";
        });

        // 点击放大图片时隐藏遮罩层和放大图片的元素
        document.getElementById("modal-image").addEventListener("click", function() {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("modal").style.display = "none";
        });



    </script>

</body>
</html>